<template>
  <view class="page">
    <view class="form">
      <view class="form-title">表单信息</view>
      <view class="form-item">
        <view class="form-item-hd">批次号</view>
        <view class="form-item-bd">{{model.batchId}}</view>
        <view class="form-item-ft">
          <view class="copy-button" @click="copy(model.batchId)">复制</view>
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-hd">渠道类型</view>
        <view class="form-item-bd">
          <js-select class="select" v-model="model.channelType" :disabled="true" dict-type="message_channel_type"
            itemLabel="dictValue" itemValue="dictKey"></js-select>
        </view>
      </view>
      <view v-if="model.channelType == 2" class="form-item">
        <view class="form-item-hd">邮件标题</view>
        <view class="form-item-bd">{{model.title}}</view>
      </view>
      <view class="form-item">
        <view class="form-item-hd">{{model.channelType == 1 ? '短信内容' : '邮件内容'}}</view>
        <view class="form-item-bd">{{model.msgContent}}</view>
      </view>
      <view class="form-item">
        <view class="form-item-hd">发送方式</view>
        <view class="form-item-bd">
          <js-select class="select" v-model="model.sendType" :disabled="true" dict-type="sendType" itemLabel="dictValue"
            itemValue="dictKey"></js-select>
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-hd">发送时间</view>
        <view class="form-item-bd">{{model.sendDate}}</view>
      </view>
    </view>
    
    <view v-if="model.status != 6" class="form">
      <view class="form-title">发送情况</view>
      <view v-for="(item, index) in model.sendRecordList" :key="index" class="sub-form">
        <view class="form-item">
          <view class="form-item-hd">接收人</view>
          <view class="form-item-bd">{{item.receivers || '-'}}</view>
        </view>
        <view class="form-item">
          <view class="form-item-hd">发送状态</view>
          <view class="form-item-bd">
            <u-tag v-if="item.sendStatus === 0" :text="getStatusName(item)" type="success" />
            <u-tag v-else-if="item.sendStatus === 2" :text="getStatusName(item)" type="warning" />
            <u-tag v-else :text="getStatusName(item)" type="error" />
          </view>
        </view>
        <view v-if="item.resultContent" class="form-item">
          <view class="form-item-hd">失败描述</view>
          <view class="form-item-bd">{{item.resultContent}}</view>
        </view>
        <view class="form-item">
          <view class="form-item-hd">发送时间</view>
          <view class="form-item-bd">{{item.createTime || '-'}}</view>
        </view>
        <view v-if="item.channelType === 1" class="form-item">
          <view class="form-item-hd">回复状态</view>
          <view class="form-item-bd">{{item.replyContent ? '已回复' : '未回复'}}</view>
        </view>
        <view v-if="item.channelType === 1" class="form-item">
          <view class="form-item-hd">回复内容</view>
          <view class="form-item-bd">{{item.replyContent || '-'}}</view>
        </view>
      </view>
    </view>

    <view v-if="model.status != 6" class="form">
      <view class="form-title">统计信息</view>
      <view class="statistics-list">
        <view class="statistics-item">
          <view class="statistics-item-hd">发送总数</view>
          <view class="statistics-item-bd">{{model.totalCnt}}</view>
        </view>
        <view class="statistics-item">
          <view class="statistics-item-hd">发送成功</view>
          <view class="statistics-item-bd primary">{{model.successCnt}}</view>
        </view>
        <view class="statistics-item">
          <view class="statistics-item-hd">处理中</view>
          <view class="statistics-item-bd">{{model.processingCnt}}</view>
        </view>
        <view class="statistics-item">
          <view class="statistics-item-hd">发送失败</view>
          <view class="statistics-item-bd">{{model.failCnt}}</view>
        </view>
        <view class="statistics-item">
          <view class="statistics-item-hd">回复数</view>
          <view class="statistics-item-bd">{{model.replyCnt}}</view>
        </view>
      </view>
    </view>

    <!-- <u-form class="form" :model="model" ref="uForm" label-position="left">
      <u-section title="表单信息" sub-title="" :arrow="false" line-color="blue"></u-section>
      <u-form-item label="批次号" prop="batchId" label-width="180" style="text-align: right;">
        {{model.batchId}}
        <text style="color: blue;border: 1rpx; border-color: aliceblue; margin-left: 20rpx;"
          @click="copy(model.batchId)">复制</text>
      </u-form-item>
      <u-form-item label="渠道类型" prop="channelType" label-width="180">
        <js-select v-model="model.channelType" :disabled="true" dict-type="message_channel_type" itemLabel="dictValue"
          itemValue="dictKey"></js-select>
      </u-form-item>
      <u-form-item label="邮件标题" prop="msgContent" label-width="180" v-if="model.channelType==2">
        <u-input v-model="model.title" type="text" maxlength="64" :disabled="true">{{model.title}}</u-input>
      </u-form-item>
      <u-form-item :label="model.channelType==1?'短信内容':'邮件内容'" prop="msgContent" label-width="180">
        <u-input type="textarea" placeholder="请输入短信内容" v-model="model.msgContent" :disabled="true" />
      </u-form-item>
      <u-form-item label="发送方式" prop="sendType" label-width="180" required>
        <js-select v-model="model.sendType" :disabled="true" dict-type="sendType" itemLabel="dictValue"
          itemValue="dictKey"></js-select>
      </u-form-item>
      <u-form-item label="发送时间" prop="sendDate" label-width="180" v-if="model.sendType=='2'">
        <u-input v-model="model.sendDate" type="text" maxlength="64" :disabled="true">{{model.sendDate}}</u-input>
      </u-form-item>

      <view style="margin-top: 20rpx;" v-if="model.status!=6">
        <u-section title="统计信息" sub-title="" :arrow="false" line-color="blue"></u-section>
        <u-table style="margin-top:15rpx;">
          <u-tr>
            <u-th width="28%">发送总数</u-th>
            <u-td>{{model.totalCnt}}</u-td>
          </u-tr>
          <u-tr>
            <u-th width="28%">发送成功</u-th>
            <u-td>
              {{model.successCnt}}
            </u-td>
          </u-tr>
          <u-tr>
            <u-th width="28%">处理中</u-th>
            <u-td>{{model.processingCnt}}</u-td>
          </u-tr>
          <u-tr>
            <u-th width="28%">发送失败</u-th>
            <u-td>{{model.failCnt}}</u-td>
          </u-tr>
          <u-tr>
            <u-th width="28%">回复数</u-th>
            <u-td>{{model.replyCnt}}</u-td>
          </u-tr>
        </u-table>
      </view>

      <view style="margin-top: 20rpx;" v-if="model.status!=6">
        <u-section title="发送情况" sub-title="" :arrow="false" line-color="blue"></u-section>
        <view class="uni-list" v-for="(item, index) in model.sendRecordList" :key="index"
          style="margin-top: 15rpx;margin-bottom: 5rpx;">
          <u-collapse :head-style="headStyle">
            <js-collapse-item
              :title="item.receivers + ' | ' +item.statusName+' | '+item.receiveTypeName+' | '+item.replyContent"
              class="u-border-bottom">
              <view class="tabContain">
                <u-table style="margin-bottom: 20rpx;">
                  <u-tr>
                    <u-th width="28%">接收人</u-th>
                    <u-td>{{item.receivers==""?"-":item.receivers}}</u-td>
                  </u-tr>
                  <u-tr>
                    <u-th width="28%">发送状态</u-th>
                    <u-td>
                      <u-tag v-if="item.sendStatus===0" :text="getStatusName(item)" type="success" />
                      <u-tag v-else-if="item.sendStatus===2" :text="getStatusName(item)" type="warning" />
                      <u-tag v-else :text="getStatusName(item)" type="error" />
                    </u-td>
                  </u-tr>
                  <u-tr v-if="item.sendStatus!=0 && item.sendStatus!=2">
                    <u-th width="28%">失败描述</u-th>
                    <u-td>
                      <text style="color: red; text-align: center;word-break:break-all;">{{item.resultContent}}</text>
                    </u-td>
                  </u-tr>
                  <u-tr>
                    <u-th width="28%">发送时间</u-th>
                    <u-td>{{item.createTime==""?"-":item.createTime}}</u-td>
                  </u-tr>
                  <u-tr v-if="item.channelType===1">
                    <u-th width="28%">回复状态</u-th>
                    <u-td>{{item.replyContent!=''?"已回复":'未回复'}}</u-td>
                  </u-tr>
                  <u-tr v-if="item.channelType===1">
                    <u-th width="28%">回复内容</u-th>
                    <u-td>
                      <text style="text-align: center;word-break:break-all;">
                        {{item.replyContent==""?"-":item.replyContent}}
                      </text>
                    </u-td>
                  </u-tr>
                </u-table>
              </view>
            </js-collapse-item>
          </u-collapse>
        </view>
      </view>
    </u-form> -->
  </view>
</template>
<script>
  import {
    validatenull
  } from '@/common/validate.js'
  export default {
    data() {
      return {
        model: {
          id: '',
          channelType: '',
          receivers: '',
          msgContent: '',
          sendType: '',
          sendDate: '',
          batchId: '',
          templateId: '',
          sendRecordList: []
        },
        seatVar: ' ',
        disabled: false,
        headStyle: {
          fontWeight: 'bold',
          color: '#606266',
          margin: '16rpx'
        },
      };
    },
    onLoad(params) {
      if (params.id) {
        this.$u.api.message.msgReceiveBatch.viewDetail({
          id: params.id
        }).then(res => {
          Object.assign(this.model, res.data);
          this.model.sendType = res.data.sendType.toString();
          this.model.channelType = res.data.channelType.toString();
        });
      }
    },
    onReady() {

    },
    methods: {
      getStatusName(row) {
        if (row.sendStatus === 0) {
          return "发送成功";
        } else if (row.sendStatus === 2) {
          return "上游处理中";
        } else {
          return "发送失败";
        }
      },
      copy(batchId) {
        uni.setClipboardData({
          data: batchId,
          success: function() {
            uni.showToast({
              title: "复制成功",
              duration: 2000
            })
          }
        })
      },
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    position: relative;
    height: 100vh;
    background: #f7f7f7;
    overflow: auto;
  }

  .form {
    background: #fff;

    &+.form {
      margin-top: 32rpx;
    }
  }

  .form-title {
    position: relative;
    padding: 24rpx 32rpx;
    font-size: 28rpx;
    font-weight: 700;
    color: #333;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: -4rpx;
      display: inline-block;
      width: 8rpx;
      height: 40rpx;
      border-radius: 8rpx;
      background: #3989FC;
      transform: translateY(-50%);
    }
  }

  .form-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 40rpx 32rpx;
    line-height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999;

    &::after {
      content: '';
      position: absolute;
      right: 32rpx;
      bottom: 0;
      left: 32rpx;
      display: block;
      border-bottom: 1px solid #eee;
    }
  }

  .form-item-hd {
    flex-shrink: 0;
    width: 116rpx;
    margin-right: 40rpx;
    text-align: left;
    font-weight: 700;
    color: #000;
  }

  .form-item-bd {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 40rpx;
    word-break: break-all;

    .select {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      color: #0066FF;
      transform: translateY(-50%);
    }
  }

  .copy-button {
    display: inline-block;
    border-radius: 20rpx;
    padding: 0 24rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #0066FF;
    background: #f0f0f0;
  }

  .statistics-list {
    padding: 24rpx 32rpx 32rpx;
  }

  .statistics-item {
    display: flex;
    align-items: center;
    height: 88rpx;
    border-radius: 8rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    background: #f7f7f7;
    overflow: hidden;

    &+.statistics-item {
      margin-top: 16rpx;
    }
  }

  .statistics-item-hd {
    flex-shrink: 0;
    min-width: 176rpx;
    padding: 0 32rpx;
    font-weight: 700;
    background: #eee;
  }

  .statistics-item-bd {
    flex: 1;
    padding-left: 32rpx;

    &.primary {
      color: #3989FC;
    }
  }

  .sub-form {
    &+.sub-form {
      margin-top: 32rpx;
    }

    .form-item {
      padding: 16rpx 32rpx;
    }
  }
</style>